<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../resources/css/calling/pages/sjksh.css">
    <title>业务员办理叫号</title>
</head>
<body class="bigScreenBody">
<!-- 头部固定区域 -->
<header class="bigScreenHeader" id="pageHeader">
    <div class="flex align-center justify-between">
        <div class="header-left-box">
            <img src="../resources/images/logo.png" alt="">
            <h3>师生服务大厅运行概况</h3>
        </div>
        <div class="header-right-box">
            <div class="header-right-btn">
                <a href="javascript:;">线上大厅</a>
                <a href="javascript:;">线下大厅</a>
            </div>
            <div class="header-right-time" id="datetime"></div>
        </div>
    </div>
</header>
<div class="bigScreenHeaderDiv"></div>
<!-- 内容区域 -->
<main class="contentMain clearfix">
    <div class="contentBox">
        <!-- 左侧栏 -->
        <div class="chunk-box-one">
            <!--总体概况-->
            <div class="gradient-border middle-card-1">
                <!-- 四角小正方形 -->
                <div class="complete-square square-tl"></div>
                <div class="complete-square square-tr"></div>
                <div class="complete-square square-bl"></div>
                <div class="complete-square square-br"></div>
                <div class="realTimeOverviewMain">
                    <div class="overviewTitle flex align-center">
                        <img src="../resources/images/titleBeforeImg.png" alt="" />
                        实时概况
                        <img src="../resources/images/titleImg.png" alt="" />
                    </div>
                    <!-- 小块 box -->
                    <div class="statisticsListBox">
                        <!-- 小块1 -->
                        <div class="statisticsItemBox">
                            <img src="../resources/images/今日预约数 .png" alt="" />
                            <div class="itemText">
                                <div class="whiteSm text-sm md:text-base">今日预约取号总量</div>
                                <div class="numberText">
                                    342
                                    <span>人/次</span>
                                </div>
                            </div>
                        </div>
                        <!-- 小块2 -->
                        <div class="statisticsItemBox">
                            <img src="../resources/images/预约取号数 .png" alt="" />
                            <div class="itemText">
                                <div class="whiteSm">今日现场取号数</div>
                                <div class="numberText">
                                    342
                                    <span>次</span>
                                </div>
                            </div>
                        </div>
                        <!-- 小块3 -->
                        <div class="statisticsItemBox">
                            <img src="../resources/images/线下叫号数.png" alt="" />
                            <div class="itemText">
                                <div class="whiteSm">今日窗口业务办理量</div>
                                <div class="numberText">
                                    32
                                    <span>件</span>
                                </div>
                            </div>
                        </div>
                        <!-- 小块4 -->
                        <div class="statisticsItemBox">
                            <img src="../resources/images/今日办理数 .png" alt="" />
                            <div class="itemText">
                                <div class="whiteSm">今日咨询量</div>
                                <div class="numberText">
                                    150
                                    <span>件</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 滚动卡片容器 -->
                    <div class="scroll-cards-container">
                        <div class="scroll-cards-wrapper">
                            <!-- 卡片1 -->
                            <div class="service-card">
                                <div class="window-number">窗口1</div>
                                <div class="card-header">
                                    学校印信服务
                                    <span>正常服务</span>
                                </div>
                                <div class="card-content">
                                    <div class="card-row">
                                        <span class="label">当前叫号</span>
                                        <span class="value">25</span>
                                    </div>
                                    <div class="card-row">
                                        <span class="label">等待人数</span>
                                        <span class="value">12</span>
                                    </div>
                                    <div class="card-row">
                                        <span class="label">共计办理数</span>
                                        <span class="value">278</span>
                                    </div>
                                </div>
                            </div>
                            <!-- 卡片2 -->
                            <div class="service-card">
                                <div class="window-number">窗口2</div>
                                <div class="card-header">
                                    学校印信服务
                                    <span>正常服务</span>
                                </div>
                                <div class="card-content">
                                    <div class="card-row">
                                        <span class="label">当前叫号</span>
                                        <span class="value">25</span>
                                    </div>
                                    <div class="card-row">
                                        <span class="label">等待人数</span>
                                        <span class="value">12</span>
                                    </div>
                                    <div class="card-row">
                                        <span class="label">共计办理数</span>
                                        <span class="value">278</span>
                                    </div>
                                </div>
                            </div>
                            <!-- 卡片3 -->
                            <div class="service-card">
                                <div class="window-number">窗口3</div>
                                <div class="card-header">
                                    教师综合服务
                                    <span>正常服务</span>
                                </div>
                                <div class="card-content">
                                    <div class="card-row">
                                        <span class="label">当前叫号</span>
                                        <span class="value">25</span>
                                    </div>
                                    <div class="card-row">
                                        <span class="label">等待人数</span>
                                        <span class="value">12</span>
                                    </div>
                                    <div class="card-row">
                                        <span class="label">共计办理数</span>
                                        <span class="value">278</span>
                                    </div>
                                </div>
                            </div>
                            <!-- 卡片4 -->
                            <div class="service-card">
                                <div class="window-number">窗口4</div>
                                <div class="card-header">
                                    学校印信服务
                                    <span>正常服务</span>
                                </div>
                                <div class="card-content">
                                    <div class="card-row">
                                        <span class="label">当前叫号</span>
                                        <span class="value">25</span>
                                    </div>
                                    <div class="card-row">
                                        <span class="label">等待人数</span>
                                        <span class="value">12</span>
                                    </div>
                                    <div class="card-row">
                                        <span class="label">共计办理数</span>
                                        <span class="value">278</span>
                                    </div>
                                </div>
                            </div>
                            <!-- 卡片5 -->
                            <div class="service-card">
                                <div class="window-number">窗口5</div>
                                <div class="card-header">
                                    学校印信服务
                                    <span>正常服务</span>
                                </div>
                                <div class="card-content">
                                    <div class="card-row">
                                        <span class="label">当前叫号</span>
                                        <span class="value">25</span>
                                    </div>
                                    <div class="card-row">
                                        <span class="label">等待人数</span>
                                        <span class="value">12</span>
                                    </div>
                                    <div class="card-row">
                                        <span class="label">共计办理数</span>
                                        <span class="value">278</span>
                                    </div>
                                </div>
                            </div>
                            <!-- 卡片6 -->
                            <div class="service-card">
                                <div class="window-number">窗口6</div>
                                <div class="card-header">
                                    学校印信服务
                                    <span>正常服务</span>
                                </div>
                                <div class="card-content">
                                    <div class="card-row">
                                        <span class="label">当前叫号</span>
                                        <span class="value">25</span>
                                    </div>
                                    <div class="card-row">
                                        <span class="label">等待人数</span>
                                        <span class="value">12</span>
                                    </div>
                                    <div class="card-row">
                                        <span class="label">共计办理数</span>
                                        <span class="value">278</span>
                                    </div>
                                </div>
                            </div>
                            <!-- 卡片7 -->
                            <div class="service-card">
                                <div class="window-number">窗口7</div>
                                <div class="card-header">
                                    学校印信服务
                                    <span>正常服务</span>
                                </div>
                                <div class="card-content">
                                    <div class="card-row">
                                        <span class="label">当前叫号</span>
                                        <span class="value">25</span>
                                    </div>
                                    <div class="card-row">
                                        <span class="label">等待人数</span>
                                        <span class="value">12</span>
                                    </div>
                                    <div class="card-row">
                                        <span class="label">共计办理数</span>
                                        <span class="value">278</span>
                                    </div>
                                </div>
                            </div>
                            <!-- 卡片8 -->
                            <div class="service-card">
                                <div class="window-number">窗口8</div>
                                <div class="card-header">
                                    学校印信服务
                                    <span class="stop">暂停服务</span>
                                </div>
                                <div class="card-content">
                                    <div class="card-row">
                                        <span class="label">当前叫号</span>
                                        <span class="value">25</span>
                                    </div>
                                    <div class="card-row">
                                        <span class="label">等待人数</span>
                                        <span class="value">12</span>
                                    </div>
                                    <div class="card-row">
                                        <span class="label">共计办理数</span>
                                        <span class="value">278</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 今日取号时间趋势 -->
            <div class="cardBox right-card-1">
                <div class="cardTile">
                    今日取号时间趋势 <img src="../resources/images/titleImg.png" alt="" />
                </div>
                <div id="right-line1" class="chart-container">
                </div>
            </div>
            <!-- 今日窗口业务办理趋势 -->
            <div class="cardBox right-card-2">
                <div class="cardTile">
                    今日窗口业务办理趋势 <img src="../resources/images/titleImg.png" alt="" />
                </div>
                <div id="right-bar1" class="chart-container">
                </div>
            </div>
        </div>
            <div class="chunk-box-two">
                <!-- 本年度累计业务办理量 -->
                <div class="cardBox left-card-1">
                    <!-- 数字标题 -->
                    <div class="cardTile">
                        累计业务办理量 <img src="../resources/images/titleImg.png" alt="" />
                    </div>
                    <!-- 美化数字分位显示 -->
                    <div class="total-number-container">
                        <div id="total-number" class="total-number">
                            <!-- 数字位通过JS动态生成 -->
                        </div>
                    </div>
                </div>
                <!-- 本月数据统计 -->
                <div class="cardBox left-card-2">
                    <div class="cardTile">
                        本月数据统计 <img src="../resources/images/titleImg.png" alt="" />
                    </div>
                    <!-- 五个小块，两行展示 -->
                    <div class="quantitativeMain">
                        <!-- 小块1 -->
                        <div class="quantitativeItem">
                            <div class="itemText">线上预约总数</div>
                            <div class="itemNum">
                                150 <span>次</span>
                            </div>
                        </div>
                        <!-- 小块2 -->
                        <div class="quantitativeItem">
                            <div class="itemText">线下取号总数</div>
                            <div class="itemNum">
                                128 <span>次</span>
                            </div>
                        </div>
                        <!-- 小块3 -->
                        <div class="quantitativeItem">
                            <div class="itemText">窗口业务办理总量</div>
                            <div class="itemNum">
                                96 <span>件</span>
                            </div>
                        </div>
                        <!-- 小块4 -->
                        <div class="quantitativeItem">
                            <div class="itemText">咨询总量</div>
                            <div class="itemNum">
                                32 <span>件</span>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="chunk-box-three">
                <!-- 近七日窗口业务办理量 -->
                <div class="cardBox right-card-3">
                    <div class="cardTile">
                        今日热门服务事项TOP5 <img src="../resources/images/titleImg.png" alt="" />
                    </div>
                    <div id="right-bar2" class="chart-container">

                    </div>
                </div>
                <!-- 近七日申办人员类型 -->
                <div class="cardBox left-card-5">
                    <div class="cardTile">
                        申办人员类型 <img src="../resources/images/titleImg.png" alt="" />
                    </div>
                    <div id="left-bar3" class="chart-container"></div>
                </div>
                <!-- 近7日热门服务事项TOP5 -->
                <div class="cardBox right-card-4">
                    <div class="cardTile">
                        近7日热门服务事项TOP5 <img src="../resources/images/titleImg.png" alt="" />
                    </div>
                    <div class="chart-container">
                    </div>
                </div>
                <!-- 未来7天预约量趋势 -->
                <div class="cardBox right-card-4">
                    <div class="cardTile">
                        未来7天预约量趋势 <img src="../resources/images/titleImg.png" alt="" />
                    </div>
                    <div id="right-line2" class="chart-container">
                    </div>
                </div>
            </div>
    </div>
</main>
<script src="../resources/js/echarts.min.js"></script>
<script type="text/javascript">
    // 移除window.onload，使用DOMContentLoaded事件监听器

    // 全局变量，用于存储当前显示的数字和数字位容器
    let currentDisplayNumber = 0;
    let digitContainers = [];
    let isFirstLoad = true;

    /**
     * 主函数，用于驱动数字动画。
     */
    function animateNumber(containerId, targetNumber, duration = 500) {
        const container = document.getElementById(containerId);
        if (!container) return;
        if (typeof targetNumber !== 'number' || isNaN(targetNumber)) return;

        if (isFirstLoad) {
            initializeNumberDisplay(container, targetNumber, duration);
        } else {
            updateNumberDisplay(targetNumber, duration);
        }
        currentDisplayNumber = targetNumber;
        isFirstLoad = false;
    }

    /**
     * 初始化数字显示。所有数字从0滚动到目标值。
     */
    function initializeNumberDisplay(container, targetNumber, duration) {
        container.innerHTML = '';
        digitContainers = [];
        const digits = targetNumber.toString().split('');

        const numberWrapper = document.createElement('div');
        numberWrapper.style.cssText = 'display: flex; justify-content: center; align-items: center; gap: 4px; height: 100%;';
        container.appendChild(numberWrapper);

        digits.forEach((digitStr, index) => {
            const digit = parseInt(digitStr, 10);
            const digitContainer = createDigitContainer(numberWrapper);
            digitContainers.push(digitContainer);

            // 带延迟的初始动画
            setTimeout(() => {
                updateSingleDigit(digitContainer, digit, duration);
            }, 100 + index * 100);
        });
    }

    /**
     * 更新数字显示。只滚动变化的数字，并处理位数的增减。
     */
    function updateNumberDisplay(newNumber, duration) {
        const newDigits = newNumber.toString().split('');
        const container = document.getElementById('total-number');
        const numberWrapper = container.querySelector('div');

        // 调整位数以匹配新数字
        while (newDigits.length > digitContainers.length) {
            const digitContainer = createDigitContainer(numberWrapper, true); // 在最前面添加
            digitContainers.unshift(digitContainer);
        }
        while (newDigits.length < digitContainers.length) {
            const digitContainer = digitContainers.shift(); // 从最前面移除
            digitContainer.remove();
        }

        // 现在位数保证匹配，逐一更新
        newDigits.forEach((digitStr, index) => {
            const newDigit = parseInt(digitStr, 10);
            const oldDigit = parseInt(digitContainers[index].dataset.currentValue, 10);
            if (newDigit !== oldDigit) {
                updateSingleDigit(digitContainers[index], newDigit, duration);
            }
        });
    }

    /**
     * 创建单个数字位的DOM结构。
     */
    function createDigitContainer(parent, addToFront = false) {
        const digitContainer = document.createElement('div');
        digitContainer.className = 'innerNumberDiv';
        digitContainer.dataset.currentValue = '0';

        const scrollContainer = document.createElement('div');
        scrollContainer.className = 'scroll-container';
        scrollContainer.style.cssText = 'position: absolute; top: 0; left: 0; width: 100%; transition: transform 0ms ease-out; transform: translateY(0px);';

        // 添加两套0-9的数字以实现无缝滚动
        for (let j = 0; j < 2; j++) {
            for (let i = 0; i <= 9; i++) {
                const numberDiv = document.createElement('div');
                numberDiv.className = 'nubmerDiv';
                const numberSpan = document.createElement('span');
                numberSpan.textContent = i;
                numberDiv.appendChild(numberSpan);
                // 移除内联样式，让CSS样式生效
                scrollContainer.appendChild(numberDiv);
            }
        }
        digitContainer.appendChild(scrollContainer);

        if (addToFront) {
            parent.insertBefore(digitContainer, parent.firstChild);
        } else {
            parent.appendChild(digitContainer);
        }
        return digitContainer;
    }

    /**
     * 使用“odometer”效果动画单个数字。
     */
    function updateSingleDigit(digitContainer, newDigit, duration) {
        const scrollContainer = digitContainer.querySelector('.scroll-container');
        if (!scrollContainer) return;

        const oldDigit = parseInt(digitContainer.dataset.currentValue, 10);
        // 使用CSS中定义的高度值，转换为vh单位
        const digitHeightVh = 4.7342; // 对应CSS中的px2vh(57px)

        // 如果是进位（如9到0），滚动到第二套数字的目标，然后瞬间重置
        if (newDigit < oldDigit) {
            const targetPosition = (newDigit + 10) * digitHeightVh;
            scrollContainer.style.transition = 'transform ' + duration + 'ms ease-out';
            scrollContainer.style.transform = 'translateY(-' + targetPosition + 'vh)';

            setTimeout(() => {
                scrollContainer.style.transition = 'transform 0ms';
                const resetPosition = newDigit * digitHeightVh;
                scrollContainer.style.transform = 'translateY(-' + resetPosition + 'vh)';
            }, duration);
        } else {
            // 正常向前滚动
            const targetPosition = newDigit * digitHeightVh;
            scrollContainer.style.transition = 'transform ' + duration + 'ms ease-out';
            scrollContainer.style.transform = 'translateY(-' + targetPosition + 'vh)';
        }

        digitContainer.dataset.currentValue = newDigit;
    }

    // 第一个updateTime函数已删除，使用下面DOMContentLoaded中的版本

    // 模拟获取总办理数的函数
    function getTotalNumber() {
        try {
            if (isFirstLoad) {
                return 123456;
            } else {
                const increment = Math.floor(Math.random() * 20) + 1; // 增加1-20的随机数
                return currentDisplayNumber + increment;
            }
        } catch (error) {
            console.error('获取总办理数错误: ' + error.message);
            return currentDisplayNumber || 123456;
        }
    }

    // 定时更新总办理数
    function updateTotalNumber() {
        try {
            const newTotal = getTotalNumber();
            animateNumber("total-number", newTotal);
        } catch (error) {
            console.error('更新总办理数错误: ' + error.message);
        }
    }

    // 页面加载完成后初始化所有功能
    document.addEventListener('DOMContentLoaded', function () {
        console.log('DOMContentLoaded事件触发，开始初始化...');

        // 立即更新时间
        console.log('准备调用updateTime函数...');
        updateTime();

        // 每秒更新一次时间
        console.log('设置时间更新定时器...');
        setInterval(updateTime, 1000);

        // 初始化总数显示
        setTimeout(() => {
            console.log('开始初始化总数显示...');
            updateTotalNumber();
            setInterval(updateTotalNumber, 5000);
        }, 500);

        // 初始化ECharts图表
        setTimeout(() => {
            console.log('开始初始化ECharts图表...');
            initializeCharts();
        }, 1000);

        // 初始化滚动卡片的鼠标悬停暂停功能
        initScrollCardsHoverPause();

        // 初始化无限循环滚动
        initInfiniteScroll();
    });

    // 初始化滚动卡片的鼠标悬停暂停功能
    function initScrollCardsHoverPause() {
        const scrollContainers = document.querySelectorAll('.scroll-cards-container');

        scrollContainers.forEach(container => {
            const wrapper = container.querySelector('.scroll-cards-wrapper');

            if (wrapper) {
                // 鼠标移入暂停滚动
                container.addEventListener('mouseenter', () => {
                    wrapper.style.animationPlayState = 'paused';
                });

                // 鼠标移出继续滚动
                container.addEventListener('mouseleave', () => {
                    wrapper.style.animationPlayState = 'running';
                });
            }
        });
    }

    // 初始化无限循环滚动
    function initInfiniteScroll() {
        const scrollContainers = document.querySelectorAll('.scroll-cards-container');

        scrollContainers.forEach(container => {
            const wrapper = container.querySelector('.scroll-cards-wrapper');

            if (wrapper) {
                // 克隆所有卡片
                const cards = wrapper.querySelectorAll('.service-card');
                const cardsArray = Array.from(cards);

                // 复制卡片并添加到容器末尾，实现无缝循环
                cardsArray.forEach(card => {
                    const clone = card.cloneNode(true);
                    wrapper.appendChild(clone);
                });

                // 调整动画速度，根据卡片数量动态设置
                const animationDuration = Math.max(20, cardsArray.length * 3);
                wrapper.style.animationDuration = animationDuration + 's';

                // 确保卡片布局正确
                const cardWidth = cardsArray[0].offsetWidth;
                const containerWidth = container.offsetWidth;
                const cardsPerRow = Math.floor(containerWidth / cardWidth);

                // 设置wrapper宽度，确保每行显示正确数量的卡片
                wrapper.style.width = '100%';
            }
        });
    }

    // 确保updateTime函数正确获取和设置时间
    function updateTime() {
        console.log('updateTime函数被调用');
        const datetimeElement = document.getElementById("datetime");
        console.log('获取到的datetime元素:', datetimeElement);

        if (!datetimeElement) {
            console.error("未找到 id 为 'datetime' 的元素");
            return;
        }

        const now = new Date();
        const y = now.getFullYear();
        const m = String(now.getMonth() + 1).padStart(2, "0");
        const d = String(now.getDate()).padStart(2, "0");
        const h = String(now.getHours()).padStart(2, "0");
        const min = String(now.getMinutes()).padStart(2, "0");
        const s = String(now.getSeconds()).padStart(2, "0");
        const weekArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
        const timeString = y + '年' + m + '月' + d + '日 ' + weekArr[now.getDay()] + ' ' + h + ':' + min + ':' + s;

        console.log('准备设置时间:', timeString);
        datetimeElement.textContent = timeString;
        console.log('时间已更新，当前显示:', datetimeElement.textContent);
    }

    // ECharts图表初始化函数
    function initializeCharts() {
        // 初始化窗口业务办理趋势图（双柱状图）
        initBusinessTrendChart();
        // 初始化热门服务事项TOP5图（柱状图）
        initPopularServicesChart();
        // 初始化申办人员类型图（饼图）
        initPersonnelTypeChart();
        // 初始化右侧四个图表
        initTodayNumberTrendChart();
        initDepartmentAnalysisChart();
        initBusinessAnalysisChart();
        initFutureReservationChart();
    }

    // 1. 窗口业务办理趋势 - 双柱状图
    function initBusinessTrendChart() {
        const chartDom = document.getElementById('left-bar1');
        if (!chartDom) return;

        const myChart = echarts.init(chartDom);
        const option = {
            backgroundColor: 'transparent',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            grid: {
                top: '25%',
                left: '10%',
                right: '10%',
                bottom: '10%',
                containLabel: true
            },
            legend: {
                data: ['总量', '日均'],
                textStyle: {
                    color: '#fff',
                    fontSize: 10
                },
                top: '5%',
                left: '10%',
                icon: 'rect',
                itemWidth: 15,
                itemHeight: 2
            },
            xAxis: {
                type: 'category',
                data: ['上月', '本月'],
                axisLine: {
                    lineStyle: {
                        color: '#4BC7FF'
                    }
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 9,
                    interval: 0,
                    // rotate: -10
                }
            },
            yAxis: {
                type: 'value',
                min: 0,
                // max: 80,
                axisLine: {
                    lineStyle: {
                        color: '#4BC7FF'
                    }
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 10
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(75, 199, 255, 0.2)'
                    }
                }
            },
            series: [
                {
                    name: '总量',
                    type: 'bar',
                    data: [1320, 1632],
                    itemStyle: {
                        color: 'rgba(99, 242, 254, 1)'
                    },
                    barWidth: '30%'
                },
                {
                    name: '日均',
                    type: 'bar',
                    data: [220, 182],
                    itemStyle: {
                        color: 'rgba(255, 111, 62, 1)'
                    },
                    barWidth: '30%'
                }
            ]
        };
        myChart.setOption(option);

        // 响应式调整
        window.addEventListener('resize', function () {
            myChart.resize();
        });
    }

    // 2. 热门服务事项TOP5 - 柱状图
    function initPopularServicesChart() {
        const chartDom = document.getElementById('left-bar2');
        if (!chartDom) return;

        const myChart = echarts.init(chartDom);
        const option = {
            backgroundColor: 'transparent',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            grid: {
                top: '10%',
                left: '10%',
                right: '10%',
                bottom: '10%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['人事用印', '介绍信开具', '公证业务', '个税汇算', '因公出国业务'],
                axisLine: {
                    lineStyle: {
                        color: '#4BC7FF'
                    }
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 9,
                    interval: 0,
                    rotate: -10
                }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#4BC7FF'
                    }
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 10
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.30)'
                    }
                }
            },
            series: [{
                type: 'bar',
                data: [320, 280, 240, 200, 150],
                itemStyle: {
                    color: 'rgba(91, 143, 249, 1)'
                },
                barWidth: '60%',
                label: {
                    show: true,
                    position: 'top',
                    color: '#fff',
                    fontSize: 10
                }
            }]
        };
        myChart.setOption(option);

        // 响应式调整
        window.addEventListener('resize', function () {
            myChart.resize();
        });
    }

    // 3. 申办人员类型 - 饼图
    function initPersonnelTypeChart() {
        const chartDom = document.getElementById('left-bar3');
        if (!chartDom) return;

        const myChart = echarts.init(chartDom);
        const option = {
            backgroundColor: 'transparent',
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                right: '10%',
                top: '20%',
                textStyle: {
                    color: '#fff',
                    fontSize: 11
                },
                itemWidth: 12,
                itemHeight: 8
            },
            series: [{
                type: 'pie',
                radius: '60%',
                center: ['35%', '50%'],
                data: [
                    { value: 45, name: '教师', itemStyle: { color: 'rgba(99, 242, 254, 1)' } },
                    { value: 35, name: '学生', itemStyle: { color: 'rgba(255, 111, 62, 1)' } },
                    { value: 20, name: '其他', itemStyle: { color: 'rgba(91, 143, 249, 1)' } }
                ],
                label: {
                    show: true, // 显示标签
                    formatter: function(params) {
                        return params.name + ':' + params.value;
                    },
                    color: '#fff',
                    fontSize: 12
                },
                labelLine: {
                    show: true, // 显示指示线
                    length: 20, // 第一段长度
                    length2: 30, // 第二段长度
                    lineStyle: {
                        color: '#fff', // 线条颜色
                        width: 2 // 线条宽度
                    }
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        myChart.setOption(option);

        // 响应式调整
        window.addEventListener('resize', function () {
            myChart.resize();
        });
    }

    // 4. 今日取号时间趋势 - 双折线图
    function initTodayNumberTrendChart() {
        const chartDom = document.getElementById('right-line1');
        if (!chartDom) return;

        const myChart = echarts.init(chartDom);
        const option = {
            backgroundColor: 'transparent',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            grid: {
                top: '25%',
                left: '10%',
                right: '10%',
                bottom: '10%',
                containLabel: true
            },
            legend: {
                data: ['现场取号', '预约取号'],
                textStyle: {
                    color: '#fff',
                    fontSize: 10
                },
                top: '8%',
                left: '10%',
                icon: 'rect',
                itemWidth: 15,
                itemHeight: 2
            },
            xAxis: {
                type: 'category',
                data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00'],
                axisLine: {
                    lineStyle: {
                        color: '#4BC7FF'
                    }
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 10
                }
            },
            yAxis: {
                type: 'value',
                min: 0,
                axisLine: {
                    lineStyle: {
                        color: '#4BC7FF'
                    }
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 10
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,0.3)'
                    }
                }
            },
            // tooltip: {
            //     trigger: 'axis',
            //     backgroundColor: 'rgba(0,0,0,0.8)',
            //     borderColor: '#4BC7FF',
            //     textStyle: {
            //         color: '#fff'
            //     }
            // },
            series: [
                {
                    name: '现场取号',
                    type: 'line',
                    data: [15, 25, 35, 45, 55, 40, 50, 60, 45, 30, 20],
                    lineStyle: {
                        color: '#569DEE',
                        width: 2
                    },
                    itemStyle: {
                        color: '#569DEE'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(86, 157, 238, 1)' },
                            { offset: 1, color: 'rgba(86, 157, 238, 0)' }
                        ])
                    },
                    symbol: 'none'
                },
                {
                    name: '预约取号',
                    type: 'line',
                    data: [10, 20, 30, 40, 50, 35, 45, 55, 40, 25, 15],
                    lineStyle: {
                        color: '#5AD8A6',
                        width: 2
                    },
                    itemStyle: {
                        color: '#5AD8A6'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(90, 216, 166, 1)' },
                            { offset: 1, color: 'rgba(90, 216, 166, 0)' }
                        ])
                    },
                    symbol: 'none'
                }
            ]
        };
        myChart.setOption(option);

        // 响应式调整
        window.addEventListener('resize', function () {
            myChart.resize();
        });
    }

    // 5. 今日窗口业务办理趋势 - 单折线图
    function initDepartmentAnalysisChart() {
        const chartDom = document.getElementById('right-bar1');
        if (!chartDom) return;

        const myChart = echarts.init(chartDom);
        const option = {
            backgroundColor: 'transparent',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            grid: {
                top: '10%',
                left: '10%',
                right: '10%',
                bottom: '10%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00'],
                axisLine: {
                    lineStyle: {
                        color: '#4BC7FF'
                    }
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 9,
                    interval: 0
                }
            },
            yAxis: {
                type: 'value',
                min: 0,
                axisLine: {
                    lineStyle: {
                        color: '#4BC7FF'
                    }
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 10
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,0.3)'
                    }
                }
            },
            // tooltip: {
            //     trigger: 'axis',
            //     backgroundColor: 'rgba(0,0,0,0.8)',
            //     borderColor: '#4BC7FF',
            //     textStyle: {
            //         color: '#fff'
            //     }
            // },
            series: [{
                type: 'line',
                data: [25, 45, 65, 55, 35, 45, 55, 40, 30, 20],
                lineStyle: {
                    color: '#4BC7FF',
                    width: 2
                },
                itemStyle: {
                    color: '#4BC7FF'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(86, 157, 238, 1)' },
                        { offset: 1, color: 'rgba(86, 157, 238, 0)' }
                    ])
                },
                symbol: 'circle',
                symbolSize: 5
            }]
        };
        myChart.setOption(option);

        // 响应式调整
        window.addEventListener('resize', function () {
            myChart.resize();
        });
    }

    // 6. 今日办理业务事项分析 - 双柱状图
    function initBusinessAnalysisChart() {
        const chartDom = document.getElementById('right-bar2');
        if (!chartDom) return;

        const myChart = echarts.init(chartDom);
        const option = {
            backgroundColor: 'transparent',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            grid: {
                top: '10%',
                left: '10%',
                right: '10%',
                bottom: '10%',
                containLabel: true
            },
            // legend: {
            //     textStyle: {
            //         color: '#fff',
            //         fontSize: 10
            //     },
            //     top: '8%',
            //     left: '10%',
            //     icon: 'rect',
            //     itemWidth: 15,
            //     itemHeight: 2
            // },
            xAxis: {
                type: 'category',
                data: ['介绍信开具', '人事证明材料开具', '工作证办理', '社保卡领取', '人事材料用印'],
                axisLine: {
                    lineStyle: {
                        color: '#4BC7FF'
                    }
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 9,
                    interval: 0,
                    rotate: -10
                }
            },
            yAxis: {
                type: 'value',
                min: 0,
                axisLine: {
                    lineStyle: {
                        color: '#4BC7FF'
                    }
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 10
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(75, 199, 255, 0.2)'
                    }
                }
            },
            series: [
                {
                    name: '已办理',
                    type: 'bar',
                    data: [45, 40, 35, 30, 20],
                    itemStyle: {
                        color: 'rgba(99, 242, 254, 1)'
                    },
                    barWidth: '60%',
                    label: {
                        show: true,
                        position: 'top',
                        color: '#fff',
                        fontSize: 10
                    }
                }
            ]
        };
        myChart.setOption(option);

        // 响应式调整
        window.addEventListener('resize', function () {
            myChart.resize();
        });
    }

    // 7. 未来七天预约量趋势 - 双折线图
    function initFutureReservationChart() {
        const chartDom = document.getElementById('right-line2');
        if (!chartDom) return;

        const myChart = echarts.init(chartDom);
        const option = {
            backgroundColor: 'transparent',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            grid: {
                top: '25%',
                left: '10%',
                right: '10%',
                bottom: '10%',
                containLabel: true
            },
            legend: {
                data: ['预约量', '实际办理量'],
                textStyle: {
                    color: '#fff',
                    fontSize: 10
                },
                top: '8%',
                left: '10%',
                icon: 'rect',
                itemWidth: 15,
                itemHeight: 2
            },
            xAxis: {
                type: 'category',
                data: ['7月1日', '7月2日', '7月3日', '7月4日', '7月5日', '7月6日', '7月7日'],
                axisLine: {
                    lineStyle: {
                        color: '#4BC7FF'
                    }
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 10
                }
            },
            yAxis: {
                type: 'value',
                min: 0,
                axisLine: {
                    lineStyle: {
                        color: '#4BC7FF'
                    }
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 10
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(75, 199, 255, 0.2)'
                    }
                }
            },
            series: [
                {
                    name: '预约量',
                    type: 'line',
                    data: [60, 55, 65, 70, 50, 45, 40],
                    lineStyle: {
                        color: '#63F2FE',
                        width: 2
                    },
                    itemStyle: {
                        color: '#63F2FE'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(99, 242, 254, 1)' },
                            { offset: 1, color: 'rgba(99, 242, 254, 0)' }
                        ])
                    },
                    symbol: 'none'
                },
                {
                    name: '实际办理量',
                    type: 'line',
                    data: [55, 50, 60, 65, 45, 40, 35],
                    lineStyle: {
                        color: '#FF6F3E',
                        width: 2
                    },
                    itemStyle: {
                        color: '#FF6F3E'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(255, 111, 62, 1)' },
                            { offset: 1, color: 'rgba(255, 111, 62, 0)' }
                        ])
                    },
                    symbol: 'none'
                }
            ]
        };
        myChart.setOption(option);

        // 响应式调整
        window.addEventListener('resize', function () {
            myChart.resize();
        });
    }
</script>
</body>

</html>